<template>
  <div class="search">
    <!-- search 搜索框 -->
    <van-search
      shape="round"
      background="rgba(224, 11, 11, 1)"
      placeholder="请输入搜索关键词"
      @click="toDetail"
    />

    <!-- banner 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <img :src="item.imageUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 标签页 -->
    <van-tabs title-active-color="red">
      <van-tab title="热门歌手">
        <van-grid :gutter="10" square direction="horizontal" :column-num="2">
          <van-grid-item v-for="item in singerList" :key="item.id">
            <van-image
              :src="item.img1v1Url"
              @click="toRecommend(item.id, item.img1v1Url, item.name)"
            />
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="排行榜">
        <h4>
          云音乐官方榜
        </h4>
        <div
          class="top-list"
          v-for="item in topList.slice(0, 4)"
          @click="toSongDetail(item.id)"
          :key="item.id"
        >
          <img :src="item.coverImgUrl" alt="" />
          <ul>
            <li v-for="(i, index) in item.tracks" :key="i.id">
              <a>{{ index + 1 }}.{{ i.first }} - {{ i.second }}</a>
            </li>
          </ul>
        </div>
        <van-divider />
        <h4>全球榜</h4>
        <div class="top-list-qqb">
          <ul>
            <li v-for="t in botList" :key="t.id">
              <img :src="t.coverImgUrl" />
              <p>{{ t.name }}</p>
            </li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="我的歌单">
        <van-empty v-if="isShow" description="您的歌单空空如也" />
        <van-list
          v-if="!isShow"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="(item, index) in myFavNameList"
            :key="index"
            :title="item.name"
            @click="toPlay(item.id)"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
export default {
  filters: {
    nameFilter(value) {
      return value;
    },
  },
  data() {
    return {
      value: "",
      banners: [],
      topList: [],
      botList: [],
      singerList: [],
      myFavList: [],
      myFavNameList: [],
      isShow: false,
      loading: false,
      finished: false,
    };
  },
  created() {
    if (localStorage.getItem("favMusicData")) {
      this.myFavList = JSON.parse(localStorage.getItem("favMusicData"));
      this.isShow = false;
    } else {
      this.isShow = true;
    }
    axios.get("http://localhost:3000/banner").then((res) => {
      this.banners = res.data.banners;
    });
    // 排行榜
    axios.get("http://localhost:3000/toplist/detail").then((res) => {
      this.topList = res.data.list;
      this.botList = this.topList.concat();
      for (let i = 0; i < 4; i++) {
        this.botList.shift();
      }
      for (let j = 0; j < 2; j++) {
        this.botList.pop();
      }
    });
    // 获取30名热门歌手
    axios
      .get("http://localhost:3000/top/artists?offset=0&limit=30")
      .then((res) => {
        this.singerList = res.data.artists;
      });
    this.loadAll();
  },
  methods: {
    toDetail() {
      this.$router.push({
        name: "Detail",
      });
    },
    toRecommend(id, pic, name) {
      localStorage.setItem("singerId", id);
      localStorage.setItem("singerPic", pic);
      localStorage.setItem("singerName", name);
      this.$router.push({
        name: "Recommend",
      });
    },
    loadAll() {
      // 加载所有歌单对应的歌名
      this.myFavList.map((res) => {
        return axios
          .get("http://localhost:3000/song/detail?ids=" + res)
          .then((res) => {
            this.myFavNameList.push(res.data.songs[0]);
          });
      });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.myFavNameList.length >= 0) {
          this.finished = true;
        }
      }, 1000);
    },
    toPlay(id) {
      localStorage.setItem("singleId", id);
      this.$router.push({
        name: "Play",
      });
    },
    toSongDetail(id) {
      localStorage.setItem("songDetail", id);
      this.$router.push({
        name: "SongDetail",
      });
    },
  },
};
</script>

<style scoped>
.my-swipe {
  width: 95vw;
  height: 35vw;
  margin: 60px auto 10px;
  border-radius: 10px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: rgba(224, 11, 11, 1);
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.top-list {
  height: 40vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top-list img {
  width: 30vw;
  height: 30vw;
  border-radius: 10px;
  float: left;
  overflow: hidden;
}
.top-list ul {
  border-bottom: #eee 1px solid;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 80%;
  width: 50%;
}
.top-list ul li a {
  font-size: 12px;
}
.top-list-qqb {
  margin-top: 10px;
}
.top-list-qqb ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.top-list-qqb ul li {
  width: 30vw;
  height: 40vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.top-list-qqb ul li img {
  width: 25vw;
  height: 25vw;

  border-radius: 15px;
}
.top-list-qqb ul li p {
  font-size: 12px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search .van-tab__pane h4 {
  width: 90%;
  margin: auto;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
}
.van-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
}
</style>
